<div id="content">
	<div class="row s_page_title">
		<sa-big-breadcrumbs [items]="['API接口管理','API接口监控','接口监控']" icon="fa fa-bar-chart" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
	</div>
	<sa-widgets-grid>
		<div class="s_table">
			<div sa-widget [editbutton]="false" color="darken" class="clearfix">
				<header><span class="widget-icon"> <i class="fa fa-table"></i> </span><h2>接口监控</h2></header>
				<div>
					<div class="widget-body no-padding">
						<div class="page-header clearfix s_table_opreation">
							<div class="left page-header-btn">
								<div class="top_module">
									<span class="module_text">接口</span>
									<div class="s_hover_box">
										<select   class="select2"  id="userNameSelect1">
											<option value=''></option>
										</select>
										<div class="s_del_icon" (click)='delUserName1()'>x</div>
									</div>
								</div>
								<div class="selectDate top_module">
									<table-select-date [notInit]='false' (outerTime)="getSelectTableTime($event)" ></table-select-date>
								</div>
								<button class="btn btn-primary" (click)="table_search()">查询</button>
							</div>
						</div>
						<!-- 用户数据列表 -->
						<ul>
							<li class="userList">
								<!-- <span class="userListItem">用户</span> -->
								<span class="userListItem">接口名称</span>
								<span class="userListItem">并发量/配额</span>
								<span class="userListItem">并发开始时间</span>
								<span class="userListItem">并发结束时间</span>
								<span class="userListItem">操作</span>
							</li>
							<!-- 没数据提示语 -->
							<li class="userList" *ngIf="!tableList.length">
								<div class="empty_data">暂无数据</div>
							</li>
							<li class="userList" *ngFor='let item of tableList;let index = index;' 
								[class.userListActive]='index === indNumber'
								(dblclick)="showChart(dealModal,item,index)"
							>
								<span class="userListItem">{{item.interfaceName}}</span>
								<span class="userListItem"><span [class.redText]="item.reqCount >= warnPeak">{{item.reqCount}}</span> / {{warnPeak}}</span>
								<span class="userListItem">{{item.startTime}}</span>
								<span class="userListItem">{{item.endTime}}</span>
								<span class="userListItem import" (click)="showChart(dealModal,item,index)">流量图</span>
							</li>
						</ul>

					</div>
				</div>
			</div>
		</div>
	</sa-widgets-grid>

	<!--详细信息 弹窗-->
	<section bsModal #dealModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" aria-label="Close" (click)="cancelDeal(dealModal)"><span aria-hidden="true">&times;</span></button>     
					<h4 class="modal-title"><span>并发统计图 - </span><span>接口名称：{{tableActive.interfaceName}}</span></h4>
				</div>
				 <div class="modal-body">
					<div>
						<table-select-date  [specifyTime]='layerSpecifyTime' [specifyId]='specifyId' [notInit]='true' (outerTime)="getLayerTime($event)" ></table-select-date>
						<button type="button" style="height: 28px;line-height: 14px;" class="btn btn-primary btn-sm" (click)='loadChart()'>确定</button>
						<div class="smart">
							<span class="smartItem" [class.smartItemActive]='activeIndex==1' (click)="monthChart()">月</span>
							<span class="smartItem" [class.smartItemActive]='activeIndex==2' (click)="weekChart()">周</span>
						</div>
					</div>
					
					<div id="box" style="width:600px;height: 400px;"></div>
				</div>
			</div>
		</div>
	</section>
	<!--详细信息 弹窗-->

</div>